<template>
  <view class="help-container">
    <view class="help-list">
      <view 
        class="help-item" 
        v-for="(item, index) in helpList" 
        :key="index"
        @click="goToArticle(item.articleId)"
      >
        <view class="item-text">
          <view class="item-title">{{ item.title }}</view>
          <view class="item-desc">{{ item.desc }}</view>
        </view>
        <uni-icons type="right" size="16" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
import {getSystemValueByKey} from "@/api/mall.js"

export default {
  data() {
    return {
      helpList: []
    }
  },
  onLoad() {
    this.getHelpList()
  },
  methods: {
    getHelpList() {
      getSystemValueByKey("HELP_CONFIG").then(res => {
        if (res.Data) {
          try {
            const helpData = JSON.parse(res.Data)
            if (Array.isArray(helpData) && helpData.length > 0) {
              this.helpList = helpData
            }
          } catch (e) {
            console.error('解析帮助中心数据失败', e)
          }
        }
      }).catch(err => {
        console.error('获取帮助中心数据失败', err)
      })
    },
    goToArticle(articleId) {
      uni.navigateTo({
        url: `/pages/article/index?id=${articleId}&readOnly=true`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.help-container {
  min-height: 100vh;
  padding: 30rpx;
  background-color: #F5F6F7;
}

.help-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}

.help-list {
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #FFFFFF;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.help-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  position: relative;
  border-bottom: 1rpx solid #EEEEEE;

  .item-text{
    flex: 1;
  }

  &:last-child {
    border-bottom: none;
  }
  
  .item-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 10rpx;
    padding-right: 40rpx;
  }
  
  .item-desc {
    font-size: 24rpx;
    color: #999999;
  }
  
  .uni-icons {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>